<template>
	<view>
		<view class="header">
			<view class="header-title">
				<span>*</span>
				<text>举报</text>
			</view>
			<view class="header-content">
				<checkbox-group @change="checkboxChange">
					<label class="flexs" v-for="(item,index) in items" :key="item.name">
						<view>
							<checkbox color="#209FFC" style="transform:scale(0.7)" :value="item.name" :checked="item.checked" />
						</view>
						<view>{{item.name}}</view>
					</label>
				</checkbox-group>
			</view>
		</view>
		<view class="choose">
			<view>
				<span>*</span>
				<text>您是否受到金钱的损失?</text>
			</view>
			<view>
				<radio-group @change="radioChange" class="flexs">
					<label class="flexs other" v-for="(item, index) in radioitem" :key="item.value">
						<view>
							<radio style="transform:scale(0.7)" color="#209FFC" :value="item.value" :checked="index === current" />
						</view>
						<view>{{item.name}}</view>
					</label>
				</radio-group>
			</view>
		</view>
		<view class="detail">
			<view class="detail-top">
				<span>*</span>
				<text>详细描述</text>
				<text class="textother">（若描述不清，问吧毋需处理）</text>
			</view>
			<view class="detail-bottom">
				<textarea v-model="miao" ></textarea>
			</view>
		</view>
		<view class="detail">
			<view class="detail-top">
				<text>手机</text>
				<text class="textother">（为防止滥用和核实举报信息，请填写真实的手机号码，我们可能会联系你，但我们不会共享你的信息。）</text>
			</view>
			<view class="detail-bottom">
				<input type="number" v-model="call"></input>
			</view>
		</view>
		<view class="detail">
			<view class="detail-top">
				<text>邮箱</text>
			</view>
			<view class="detail-bottom">
				<input v-model="you"></input>
			</view>
		</view>
		<view class="detail">
			<view class="detail-top">
				<text>证明</text>
			</view>
			<view class="detail-bottom" @tap="choicePic">
				<image :src="img"></image>
			</view>
		</view>
		<view class="buttoncss flex">
			<button class="bts" @tap="back">取消</button>
			<button class="bts-other" @tap="save">提交</button>
		</view>
	</view>
</template>
<script>
	import api from "@/common/api.js"
	import {
		baseURL
	} from "@/common/http.js"
	import app from "../../../App.vue"
	export default {
		data() {
			return {
				imgurl: '',
				wenid: '',
				img: '../../../static/images/add.png',
				id: '',
				li: '',
				jin: '',
				you: '',
				call: '',
				miao: '',
				type: '',
				lock: false, // 提交锁
				items: [{
						value: '1',
						name: '1.以货到付款或付邮费免费领取等方式销售假冒伪劣产品'
					},
					{
						value: '2',
						name: '2.非银行或拥有从业资质的机构进行金融业务：借贷、信用卡办理、P2P、区块链等',
					},
					{
						value: '3',
						name: '3.刷单或以刷单兼职形式骗取保证金等：做单、兼职等'
					},
					{
						value: '4',
						name: '4.传播社区、非法性病治疗营销信息，售卖非法性用品、性药品、性保健品等'
					},
					{
						value: '5',
						name: '5.收集敏感账户密码：支付宝密码，手机服务密码,QQ密码、银行卡密码等'
					},
					{
						value: '6',
						name: '6.假冒官网发布信息或售卖产品：跑男、好声音、阿迪达斯等'
					},
					{
						value: '7',
						name: '7.违反法律法规;散布谣言，传播色情、暴力、赌博或迷信等信息'
					},
					{
						value: '8',
						name: '8.诱导分享朋友圈或关注微信公众号：集赞、展示公众号二维码等'
					},
					{
						value: '9',
						name: '9.非法集资或传销：民族大业、互助扶贫、创新金融产品等'
					},
					{
						value: '10',
						name: '10.包含钓鱼信息：QQ密码找回、Apple ID 登录异常等'
					},
					{
						value: '11',
						name: '11.侵犯他人知识产权：未经授权使用他人商标、图片、文字等'
					}
				],
				radioitem: [{
						value: '有',
						name: '是'
					},
					{
						value: '没有',
						name: '否',
					}
				],
				current: -1,
				show: true
			};
		},
		methods: {
			/* getEmail(e) {
				this.you = e.detail.value
			},
			getPhone(e) {
				this.call = e.detail.value
			},
			getmiao(e) {
				this.miao = e.detail.value
			}, */
			checkboxChange: function(e) {
				let that = this
				var items = this.items,
					values = e.detail.value;
				that.li = e.detail.value;
				for (var i = 0, lenI = items.length; i < lenI; ++i) {
					const item = items[i]
					if (values.includes(item.name)) {
						this.$set(item, 'checked', true)
					} else {
						this.$set(item, 'checked', false)
					}
				}
				values.forEach((item, index) => {
					if (item == '12') {
						that.show = false
					} else {
						that.show = true
					}
				})

			},
			radioChange(e) {
				for (let i = 0; i < this.radioitem.length; i++) {
					if (this.items[i].vlaue === e.target.value) {
						this.current = i;
						break;
					}
				}
				this.jin = e.target.value
			},
			//上传图片
			choicePic() {
				let that = this
				uni.chooseImage({
					count: 1,
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: function(res) {
						uni.getFileSystemManager().readFile({
							filePath: res.tempFilePaths[0], //选择图片返回的相对路径
							encoding: 'base64', //编码格式
							success: res => { //成功的回调
								that.img = 'data:image/jpeg;base64,' + res.data //不加上这串字符，在页面无法显示的哦
							}
						});
					}
				});
			},
			back() {
				if (this.type == 1) {
					uni.navigateTo({
						url: '../../yuLan/yuLan?wenid=' + this.wenid + '&id=' + this.id
					})
				} else if(this.type == 2){
					uni.navigateTo({
						url: '../../questionHallDetail/questionHallDetail?wenid=' + this.wenid + '&id=' + this.id
					})
				} else {
					uni.navigateTo({
						url: '../../lookQues/lookQues?wenid=' + this.wenid + '&id=' + this.id
					})
				}
			},
			//校验邮箱格式
			checkEmail(email){
				return RegExp(/^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/).test(email);
			},
			//校验手机格式
			checkMobile(mobile){
				return RegExp(/^1[34578]\d{9}$/).test(mobile);
			},
			save() {
				let data = {
					api: 'wenju',
					name: uni.getStorageSync('message')[0].id ? uni.getStorageSync('message')[0].id : '',
					wenid: this.wenid,
					li: this.li,
					jin: this.jin,
					you: this.you,
					call: this.call,
					miao: this.miao,
					zhen: this.img,
				}
				for (let key in data) {
					if (data[key] == '' && key != 'zhen' && key != 'call' && key != 'you') {
						uni.showToast({
							title: '请完整填写必填项',
							duration: 1500,
							icon: 'none'
						})
						this.lock = false
						break
					} else {
						this.lock = true
					}
				}
				if(data.call && data.call != '') {
					if(!this.checkMobile(data.call)) {
						uni.showToast({
							title: '请输入正确的手机号',
							icon: 'none',
							duration: 2000
						})
						this.lock = false
					}
				}
				if(data.you && data.you != '') {
					if(!this.checkEmail(data.you)) {
						uni.showToast({
							title: '请输入正确的邮箱',
							icon: 'none',
							duration: 2000
						})
						this.lock = false
					}
				}
				if (this.lock) {
					api.add(data).then(res => {
						if (res.code == 200) {
							uni.showToast({
								title: '举报已提交',
								icon: 'none',
								duration: 2000,
								success: () => {
									setTimeout(() => {
										uni.navigateBack({
											delta: -1
										})
									}, 2000)
								}
							})
						}
					}).catch(err => {
						console.log(err)
					})
				}
			}
		},
		onShareAppMessage(options) {
			let shareObj = {
				success: (res) => {
					if (res.errMsg == 'shareAppMessage:ok') {
						uni.showToast({
							title: '分享成功',
							icon: 'success',
							duration: 1500
						})
					}
				},
				fail: () => {
					if (res.errMsg == 'shareAppMessage:fail cancel') {
						uni.showToast({
							title: '取消分享',
							icon: 'none',
							duration: 2000
						})
					} else if (res.errMsg == 'shareAppMessage:fail') {
						// 转发失败，其中 detail message 为详细失败信息
					}
				},
				complete: () => {
					// 转发结束之后的回调（转发成不成功都会执行）
				}
			}
		},
		onLoad(options) {
			this.wenid = options.wenid
			this.id = options.id
			this.type = options.type
			this.imgurl = app.globalData.imgurls;
		}
	}
</script>

<style lang="scss">
	span {
		color: #ff0000;
	}

	.header {
		width: 690rpx;
		margin: 20rpx auto;
		font-size: 30rpx;
		color: #333;

		.header-title {
			margin: 20rpx 0;
		}
	}

	.flexs {
		display: flex;
		margin: 10rpx 0;
	}

	.show {
		textarea {
			width: 690rpx;
			height: 100rpx;
			border: 1rpx solid #DFDFDF;
		}
	}

	.choose {
		width: 690rpx;
		margin: 0 auto;
	}

	.other {
		justify-content: center;
		margin-right: 100rpx;
	}

	.detail {
		width: 690rpx;
		margin: 0 auto;

		.detail-top {
			margin: 15rpx 0;
			color: #333;
			font-size: 30rpx;

			.textother {
				font-size: 24rpx;
				color: #999;
			}
		}

		.detail-bottom {
			textarea {
				width: 690rpx;
				height: 100rpx;
				border: 1rpx solid #DFDFDF;
			}

			input {
				width: 690rpx;
				height: 100rpx;
				border: 1rpx solid #DFDFDF;
			}

			image {
				width: 150rpx;
				height: 150rpx;
			}

		}
	}

	.buttoncss {
		width: 690rpx;
		margin: 20rpx auto;
		justify-content: space-around;

		.bts,
		.bts-other {
			width: 330rpx;
			height: 100rpx;
			line-height: 100rpx;
			font-size: 36rpx;
			text-align: center;
			color: #666;
			background: #F0F0F0;
		}

		.bts-other {
			background: #209FFC;
			color: #fff;
		}
	}

	button::after {
		border: none;
	}
</style>
